<template>
    <div>
        <bufantop></bufantop>
        <!-- banner图片 -->
        <img src="http://yanxuan.nosdn.127.net/8976116db321744084774643a933c5ce.png" alt="" class="banner">


        <van-tabs v-model="activeName" @click="priceSorted">
            <van-tab title="综合" >
                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="item in list" :key="item.id">
                        <van-image :src="item.list_pic_url" />
                        <p>{{item.name}}</p>
                        <p>¥{{item.retail_price}}</p>
                    </van-grid-item>
  
                </van-grid>
            </van-tab>
            <van-tab title="价格"  >
                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="item in list" :key="item.id">
                        <van-image :src="item.list_pic_url" />
                        <p>{{item.name}}</p>
                        <p>¥{{item.retail_price}}</p>
                    </van-grid-item>
  
                </van-grid>
            </van-tab>
            <van-tab title="分类" >
                <van-grid :border="false" :column-num="2">
                    <van-grid-item v-for="item in list" :key="item.id">
                        <van-image :src="item.list_pic_url" />
                        <p>{{item.name}}</p>
                        <p>¥{{item.retail_price}}</p>
                    </van-grid-item>
  
                </van-grid>
            </van-tab>
        </van-tabs>






    </div>
</template>

<script>
import {goodsList} from "@/api/home/isNew"
import bufantop from "@/components/bufantop.vue"
export default {
    data(){
        return{
            activeName:"",
            list:[],
            item:null,
        }
    },
    components:{
      bufantop
    },
    created(){
        console.log(JSON.parse(this.$route.query.value));
        this.item = JSON.parse(this.$route.query.value);
        this.getData();
    },
    methods:{
        priceSorted(item,title){
            if(item=="1"){
                if(this.item.order==""){
                    this.item.order='asc'
                }else if(this.item.order=='asc'){
                    this.item.order='desc'
                }else{
                    this.item.order='asc'
                }
                console.log(this.item);
                this.getData();
            }
        },
        getData(){
            goodsList({
                isHot:this.item.isHot,
                isNew:this.item.isNew,
                order:this.item.order
        }).then(res=>{
            // console.log(res);
            this.list=res.data
        })
        },

    }
}
</script>

<style lang="scss" scoped>
    .banner{
        width: 100%;
        height: 139px;
    }
</style>